<template>
	<view style="background-color:#f9f8fd ;">
		<!-- 搜索组件 -->
		<my-search @click="gotoSearch"></my-search>
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true">
			<swiper-item v-for="(item,i) in swiperimg" :key="i">
				<image :src="item"></image>
			</swiper-item>
		</swiper>
		
		<view class="con">
			<view class="pist">
				<image class="tz" src="../../static/nimg/tz.png" mode=""></image><text>熟知急救小知识，及时进行救治</text>
			</view>
		</view>
		<view class="list" v-for="li,index in List"
			@click="JumpPage(index)">
		
			<view><text class="li_name">{{li.name}}</text></view>
		
			<view><text class="describe">{{describe[index]}}</text>
				<image class="img" :src="src[index]">
				</image>
			</view>
		
		</view>
		<!-- <view v-if="content">
			<view class="frame">
				
				<view class="title">{{title}}</view>
				
				<rich-text :nodes="content" space="emsp"/>
				
			</view>
		</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				src: ["../../static/nimg/1.png", "../../static/nimg/2.png", "../../static/nimg/3.png",
					"../../static/nimg/4.png", "../../static/nimg/5.png", "../../static/nimg/6.png",
				],
				describe: ["必备急救技能", "学习技能", "头部受伤处理", "烫伤处理", "皮肤简单处理", "溺水应急措施"],
				swiperimg: ["https://anmti.cn/img/nimg2/7.png", "https://anmti.cn/img/nimg2/8.png", "https://anmti.cn/img/nimg2/9.png",
					"https://anmti.cn/img/nimg2/10.png",
				],
				wh: 0,
				id: 0,
				tips: 0,
				List: [],
				content: '',
				title: '',
				scrollTop: 0,
				bgpic: ''
			}
		},
		onLoad(options) {
			if (JSON.stringify(options) !== "{}") {

				console.log(options.tips)
				return this.gotos(options)
			}
			// 获取设备宽度
			const sysInfo = uni.getSystemInfoSync()
			// （屏幕总宽-（280）轮播图宽度）/2
			// this.wh=(sysInfo.windowWidth-280)/2	
			this.wh = (750 - 540) / 2
			this.loadData1(options)
		},
		methods: {
			JumpPage(index, ifexistence) {
				console.log("执行了")
				var str = JSON.stringify(this.List[index]);
				if (ifexistence !== 1) {
				return	uni.navigateTo({
						url: '../tipsContent/tipsContent?content=' + str.replace(/=/g, "-")
					})
				} else {
					return uni.redirectTo({
						url: '../tipsContent/tipsContent?content=' + str.replace(/=/g, "-")
					})
				}
			},
			async gotos(options) {
				await this.getData()
				if (options.tips) {
					this.tips = options.tips
					this.JumpPage(this.List.findIndex(value => value.id === options.tips), 1)
				}
			},

			//跳转搜索页面
			gotoSearch() {
				console.log("执行了")
				uni.navigateTo({

					url: '/subpkg/searchtip/searchtip'
				})
			},

			activeChange(i, to) {
				this.id = i
				this.content = this.List[i].content
				this.title = this.List[i].name
				this.bgpic = this.List[i].image
				if (to) {
					this.scrollTop = i * 50
				}
			},
			async loadData1(options) {
				await this.getData()
				if (options.tips) {
					this.tips = options.tips
					this.activeChange(this.List.findIndex(value => value.id === options.tips), 1)
				} else
					this.activeChange(0)
			},
			getData: function() {
				uni.showLoading({
					title: '数据加载中'
				});
				return new Promise((resolve, reject) => {
					uni.request({
						url: 'https://anmti.cn/cantlogin/getTips',
						method: 'GET',
						success: (res) => {
							this.List = res.data
							resolve('suc');
							uni.hideLoading();
						},
						fail: (err) => {
							reject('err');
							uni.$showMsg('加载失败')
							uni.hideLoading();
						}
					})
				})
			}
		},

	}
</script>

<style>
	.list{
		background-color:rgba(255,255,255,.6);
		width: 320rpx; 
		height: 180rpx; 
		float: left;
		margin-left: 35rpx;
		margin-top: 20rpx;
		border-radius: 35rpx;
		display: flex; 
		flex-direction: column;
		justify-content: space-around;
		position: relative;
	}
	
	.con{
		position: relative;
	}
	.pist{
		position: relative;
		top: 10rpx;
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		background-color:#FFFFFF;
		border: 1px solid rgba(0,0,0,.1);
	}
	.tz{
		position: absolute;
		top: 16rpx;
		left: 40rpx;
		width: 44rpx;
		height: 44rpx;
		
	}
	.con text{
		position: absolute;
		left: 100rpx;
		font-size: 26rpx;
		color:	#545454;
	}
	swiper {
		height: 350rpx;
	}

	swiper image {
		width: 750rpx;
		height: 350rpx;
	}
	.li_name{
		margin-left: 20rpx;
		font-size: 32rpx;
		font-weight: 600;
		color: #545454;
	}
	.describe{
		position: absolute;
		margin-left: 20rpx;
		top: 120rpx;
		color: #adadaf;
		font-size: 26rpx;
	}
	.img{
		width:60rpx;
		height: 60rpx; 
		position: absolute;
		top:100rpx;
		left: 200rpx;
	}
</style>
